<!-- @format -->

<script setup>
	import { reactive, ref } from 'vue'

	const form = reactive({
		name: '',
		region: '',
		date: '',
		delivery: false,
		type: [],
		resource: '',
		desc: ''
	})

	// 表单校验规则
	const formRules = {
		// 名称
		name: [
			{
				// 必填项
				required: true,
				// 不满足条件的错误提示消息
				message: '请填写活动名称',
				// 校验的触发时机: blur是在失去焦点时做校验
				trigger: 'blur'
			},
			{
				// 长度限制: 在 4 - 10 个字符之间
				min: 4,
				max: 10,
				message: '长度只能在4-10之间',
				trigger: 'blur'
			}
		],
		// 地区
		region: [
			{
				// 必填项
				required: true,
				message: '请选择活动地区',
				trigger: 'change'
			}
		],
		// 日期
		date: [
			{
				type: 'date', // 日期类型
				required: true, // 必填项
				message: '请选择一个时间',
				trigger: 'change'
			}
		],
		// 类型
		type: [
			{
				type: 'array', // 必须是数组类型
				required: true,
				message: '请至少选择一个活动类型',
				trigger: 'change'
			}
		],
		// 资源
		resource: [
			{
				required: true,
				message: '请选择活动资源',
				trigger: 'change'
			}
		],
		// 描述
		desc: [{ required: true, message: '请输入活动描述', trigger: 'blur' }]
	}

	// 获取 el-form 组件实例
	const formRef = ref(null)

	// 提交
	const onSubmit = () => {
		// 做整体校验
		// console.log(formRef.value) // 获取 el=form 组件暴漏的方法
		// 重点有两个方法需要掌握：
		// 1. validate((valid) => {}): 整体校验
		// 2. resetFields(): 重置表单(把表单的值恢复成默认值，另一个会移除红色的错误校验结果)

		formRef.value.validate((valid) => {
			if (!valid) return alert('请输入合法的值')
			console.log('ok')
		})
	}

	// 重置
	const onReset = () => {
		formRef.value.resetFields()
	}
</script>

<template>
	<el-form
		ref="formRef"
		:model="form"
		:rules="formRules"
		label-width="auto"
		style="max-width: 600px">
		<el-form-item
			label="Activity name"
			prop="name">
			<el-input
				v-model="form.name"
				placeholder="请输入活动名称" />
		</el-form-item>
		<el-form-item
			label="Activity zone"
			prop="region">
			<el-select
				v-model="form.region"
				placeholder="please select your zone">
				<el-option
					label="Zone one"
					value="shanghai" />
				<el-option
					label="Zone two"
					value="beijing" />
			</el-select>
		</el-form-item>
		<el-form-item
			label="Activity time"
			prop="date">
			<el-time-picker
				v-model="form.date"
				placeholder="Pick a time"
				style="width: 100%" />
		</el-form-item>
		<el-form-item label="Instant delivery">
			<!-- 
        el-switch: 开关组件，只有两种状态，打开或关闭
         v-model: 收集开关的状态
      -->
			<el-switch v-model="form.delivery" />
		</el-form-item>
		<el-form-item
			label="Activity type"
			prop="type">
			<el-checkbox-group v-model="form.type">
				<el-checkbox
					value="Online activities"
					name="type">
					Online activities
				</el-checkbox>
				<el-checkbox
					value="Promotion activities"
					name="type">
					Promotion activities
				</el-checkbox>
				<el-checkbox
					value="Offline activities"
					name="type">
					Offline activities
				</el-checkbox>
				<el-checkbox
					value="Simple brand exposure"
					name="type">
					Simple brand exposure
				</el-checkbox>
			</el-checkbox-group>
		</el-form-item>
		<el-form-item
			label="Resources"
			prop="resource">
			<!-- 
        el-radio-group: 将单选框进行分组，用来管理一组单选框
          v-model: 收集选中的单选框的值
      -->
			<el-radio-group v-model="form.resource">
				<!-- 
          el-radio: 单选框组件 
             value: 提供给v-model收集值用的
        -->
				<el-radio value="Sponsor">Sponsor</el-radio>
				<el-radio value="Venue">Venue</el-radio>
			</el-radio-group>
		</el-form-item>
		<el-form-item
			label="Activity form"
			prop="desc">
			<!-- 
         el-input: 输入框组件
           v-model: 收集输入框的值
           type: 默认值是text文本框，还有可选值比如: password/textarea
      -->
			<el-input
				v-model="form.desc"
				type="textarea" />
		</el-form-item>
		<el-form-item>
			<el-button
				type="primary"
				@click="onSubmit"
				>提 交</el-button
			>
			<el-button @click="onReset">重 置</el-button>
		</el-form-item>
	</el-form>
</template>
